<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>主播管理</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        .my-ver-align {
            vertical-align: -2px;
        }

        .btn-link {
            color: gray;
        }

        .pagination {
        }
    </style>
</head>
<body>
<div class="container-fiuld p-3">
    <div class="card">
        <div class="card-header bg-transparent border-0">
            <ol class="breadcrumb pl-0 bg-transparent">
                <li class="breadcrumb-item pl-0"><a href="#">统计报表</a></li>
                <li class="breadcrumb-item active"><a href='#'>通话记录</a></li>
            </ol>
        </div>
        <div class="card-body">
            <div class="row mt-3 mb-3">
                <div class="col-lg-12">
                    <form class="form-inline">
                        <label for="email">主播ID/主播昵称:</label>
                        <input type="text" class="ml-4 mr-5 form-control" id="email" placeholder="请选择">
                        <label for="time">时间周期：</label>
                        <select id="time" class="form-control" value="0">
                            <option value="0">请选择</option>
                            <option value="1">昨日</option>
                            <option value="2">本日</option>
                            <option value="3">一周</option>
                            <option value="4">本月</option>
                        </select>
                        <!-- <div class="form-check">
                          <label class="form-check-label">
                            <input class="form-check-input" type="checkbox"> Remember me
                          </label>
                        </div> -->
                        <button type="submit" class="btn btn-primary ml-5 mr-3">查询</button>
                        <button type="submit" class="btn btn-secondary">重置</button>
                    </form>
                </div>
            </div>
            <div class="row mt-3 mb-3">
                <div class="col-lg-12">
                    <form class="form-inline">
                        <button type="submit" class="btn btn-primary mr-3">+ 新建</button>
                        <button type="submit" class="btn btn-secondary">批量操作</button>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table">
                        <thead class="thead-light">
                        <tr class="text-dark">
                            <th><input type="checkbox"></th>
                            <th>时间（一周）</th>
                            <th>主播ID/昵称</th>
                            <th>通话总时长（分钟）</th>
                            <th>通话人数（人）</th>
                            <th>收到的洽贝</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2008-12-01</td>
                            <td>TradeCode21(深圳)小花</td>
                            <td>100</td>
                            <td>10</td>
                            <td>12000</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2008-12-01</td>
                            <td>TradeCode21(深圳)小花</td>
                            <td>100</td>
                            <td>10</td>
                            <td>12000</td>
                        </tr>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>2008-12-01</td>
                            <td>TradeCode21(深圳)小花</td>
                            <td>100</td>
                            <td>10</td>
                            <td>12000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="card-footer bg-transparent border-0">
            <div class="row">
                <div class="col-lg-6">
                    <span class="text-muted">总共400条记录 第1/80页</span>
                </div>
                <div class="col-lg-6 d-flex flex-row-reverse"><!--右对齐-->
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                        <li class="page-item"><a class="page-link" href="#">1</a></li>
                        <li class="page-item active"><a class="page-link" href="#">2</a></li>
                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!--记录不能删除-->
        <div class="row">
            <div class="col-lg-12 text-center">
                <div>
                    <button class="btn btn-link">帮助</button>
                    <button class="btn btn-link">隐私</button>
                    <button class="btn btn-link">条款</button>
                </div>
                <div class="text-muted small mb-3">copyright&copy;2018 傻鸟哥体验技术部出品</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
